<template>
  <div class="discount-container">
    <h3>优惠专区</h3>
    <div class="big-imgs">
      <img src="../assets/images/ff8051f35e3e6ae4.png" alt="">
      <img src="../assets/images/00eec061c085ed4f.png" alt="">
    </div>
    <ul class="small-imgs">
      <li>
        <h4>下单免运</h4>
        <p>爆品秒杀</p>
        <img src="../assets/images/9ac48e482a2b8132.jpg" alt="">
      </li>
      <li>
        <h4>抗击疫情</h4>
        <p>爆品秒杀</p>
        <img src="../assets/images/9e4cc1356913d3eb.png" alt="">
      </li>
      <li>
        <h4>满69减20</h4>
        <p>爆品秒杀</p>
        <img src="../assets/images/ba630e256d7341d6.png" alt="">
      </li>
      <li>
        <h4>叠加减13</h4>
        <p>爆品秒杀</p>
        <img src="../assets/images/f6440d3b288500ae.png" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: ""
  }
</script>

<style lang="scss" scoped>
.discount-container{
  border-radius: 40px;
  background-color: #fff;
  padding: 66px 30px;
  h3{
    /*line-height: 114px;*/
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 60px;
  }
  .big-imgs{
    display: flex;
    justify-content: space-between;
    img{
      flex: 1;
      height: 430px;
      border-radius: 20px;
      &:first-child{
          margin-right: 20px;
       }
    }
  }
  .small-imgs{
    list-style: none;
    justify-content: space-between;
    padding: 0;
    display: flex;
    margin-bottom: 0;
    li{
      text-align: center;
      flex: 1;
      margin-right: 15px;
      padding-bottom: 28px;
      background-color: #eeeeee;
      h4{
        font-size: 45px;
        color: crimson;
        margin: 36px 0 20px;
      }
      p{
        font-size: 40px;
        margin: 0 0 28px;
      }
      img{
        height: 178px;
        width: 178px;
      }
    }
  }
}
</style>
